<template>
	<view class="my-mask-page">
		<u-toast ref="taskToast" />
		<navBar back="back" title="我的任务" justCenter="justCenter" bgColor="rgba(255, 255, 255, 0)" v-if="showNav">
		</navBar>
		<scroll-view scroll-y="true" class="scroll-Y" :style="{height:taskList.length>2?heightValue+'px':auto}"
			@scroll="scroll">
			<view class="task-content">
				<view class="task-content-title">
					领取任务领乐趣粮
				</view>
				<view class="tick-out">
					<view class="tick-out-rate">
						<view class="tick-out-rate-item" v-for="item in 6" :key="item">
							<text>{{item>2?'+50':'累计50'}}</text>
							<img :src="item>2?'https://www.jk334.cn/img/task-selete.png':'https://www.jk334.cn/img/task-exchange.png'"
								alt="" class="tick-out-rate-item-img" />
						</view>
						<view class="tick-out-rate-line">

						</view>
					</view>
					<view class="tick-out-title">
						每日领取任务即可领取乐趣粮食,坚持每日打卡可获得最终大礼包哦~
					</view>
				</view>

				<taskItem v-for="item in taskList" :key="item" :subItem="item" bgColor='#FFF8EB'
					@setStatus="setStatus(item,index)"></taskItem>
				<view class="" v-if="taskList&&taskList.length===0">
					<u-empty mode="list"></u-empty>
				</view>
			</view>
		</scroll-view>
	</view>

</template>

<!-- 我的任务-->
<script>
	import navBar from '@/components/navBar/navBar.vue';
	import taskItem from '@/components/taskItem/taskItem.vue';
	import {
		getHeight
	} from '@/utiles/utils.js';
	import {
		myRequest
	} from '@/utiles/api.js'
	export default {
		components: {
			navBar,
			taskItem
		},
		data() {
			return {
				heightValue: 0,
				showNav: true,
				taskList: [],
				showCalendar: false,
			}
		},
		onShow() {
			const windowHeight = getHeight().windowHeight //100vh
			const statusBarHeight = getHeight().statusBarHeight //tabBar高度
			const navBareight = getHeight().navBareight //头部高度
			this.heightValue = windowHeight - statusBarHeight - navBareight
			this.getTaskList()
		},
		methods: {
			scroll({
				detail
			}) {
				if (detail.scrollTop > 120) {
					const windowHeight = getHeight().windowHeight //100vh
					this.heightValue = windowHeight
					this.showNav = false
				} else {
					this.showNav = true
				}
			},
			async setStatus(item, index) {
				let phone = uni.getStorageSync('phone')
				const {
					taskList
				} = this || {}
				if (!item.appId) return
				let {
					success,
					data,
					message
				} = await myRequest({
					prefix: 'https://www.jk334.cn/api/',
					url: 'Applet/ReceiveBenefits',
					method: 'POST',
					contentType: 'application/json',
					data: {
						muid: phone,
						appId: item.appId
					}
				})
				if (success) {
					this.getTaskList()
					this.$refs.taskToast.show({
						type: 'success',
						message: message,
						duration: '2000',
					})
				} else {
					this.$refs.taskToast.show({
						type: 'error',
						message: message,
						duration: '2000',
					})
				}
			},
			async getTaskList() {
				const phone = uni.getStorageSync('phone')
				if (!phone) return
				let {
					success,
					data,
					message
				} = await myRequest({
					prefix: 'https://www.jk334.cn/api/',
					url: 'Applet/GetApps',
					method: 'POST',
					contentType: 'application/json',
					data: {
						muid: phone
					}
				})
				if (success) {
					this.taskList = [...data]
				} else {
					this.$refs.uToast.show({
						type: 'loading',
						message: message,
						duration: '2000',
					})
				}
			},
		}
	}
</script>

<style scoped lang="scss">
	.my-mask-page {
		background-image: url('https://www.jk334.cn/img/task-center.png');
		background-size: 750rpx 586rpx;
		background-repeat: no-repeat;
		font-family: PingFang SC, PingFang SC;


		.task-content {
			margin-top: 400rpx;
			background: #FFFFFF;
			box-shadow: 0px -6rpx 12rpx 0rpx #FDBB66;
			border-radius: 48rpx 48rpx 0px 0px;
			padding: 0 30rpx 30rpx 30rpx;
			z-index: 20;

			.task-content-title {
				width: 424rpx;
				height: 92rpx;
				text-align: center;
				line-height: 92rpx;
				font-size: 32rpx;
				color: #E8852E;
				font-style: italic;
				font-family: YouSheBiaoTiHei, YouSheBiaoTiHei;
				font-weight: 400;
				background: #FEF7EA;
				border-radius: 0px 0px 40rpx 40rpx;
				margin: 0 auto;
				margin-bottom: 30rpx;
			}

			.tick-out {
				width: 100%;
				// height: 220rpx;
				padding: 24rpx 28rpx;
				box-sizing: border-box;
				border-radius: 16rpx;
				border: 2rpx solid #FFD8B1;
				display: flex;
				flex-direction: column;
				justify-content: space-between;

				.tick-out-rate {
					position: relative;
					display: flex;
					justify-content: space-between;
					font-size: 20rpx;
					font-weight: 400;
					color: #959595;

					.tick-out-rate-item {
						display: flex;
						flex-direction: column;
						align-items: center;
						z-index: 10;

						.tick-out-rate-item-img {
							width: 40rpx;
							height: 40rpx;
							margin-top: 10rpx;
						}
					}

					.tick-out-rate-line {
						position: absolute;
						bottom: 16rpx;
						left: 50%;
						transform: translate(-50%, 0%);
						width: 294px;
						height: 4rpx;
						background: #FEDFA4;
					}
				}

				.tick-out-title {
					margin-top: 18rpx;
					font-size: 24rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					color: #E57F30;
				}
			}

		}


	}
</style>